<template>
  <div class="successful-brand-item" :class="{'ranking-1':ranking==1}">
    <div class="top">
      <div class="img">
        <img src="../../../assets/img/vote-img-border.png" alt="" class="border">
        <img src="../../../assets/img/crown-1.png" class="crown" alt="" v-if="ranking==1">
        <img src="../../../assets/img/crown-2.png" class="crown" alt="" v-if="ranking==2">
        <img src="../../../assets/img/crown-3.png" class="crown" alt="" v-if="ranking==3">
        <img :src="img" alt="" class="vote-logo">
      </div>
      <div class="name">
        <h1 class="short-name">
          <span>{{ranking}}</span>
          {{shortName}}
        </h1>
        <p>{{name}}</p>
      </div>
    </div>
    <div class="bottom">
      <div class="info-item">
        <span class="icon address"></span>
        <span class="content">{{address}}</span>
      </div>
      <div class="info-item">
        <span class="icon site"></span>
        <span class="content site">公司网址：{{site}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    shortName: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    address: {
      type: String,
      default: ''
    },
    site: {
      type: String,
      default: ''
    },
    ranking: {
      type: [String, Number],
      default: ''
    },
    img: {
      type: String,
      default: ''
    },
    itemId: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped lang="scss">
.successful-brand-item {
  width: 6.9rem;
  margin: 0 auto 0.25rem auto;
  background: url(../assets/brand-bg-2.png) center no-repeat;
  background-size: cover;
  border-radius: 0.14rem;
  border: 1px solid #dcc459;
  &.ranking-1 {
    background-image: url(../assets/brand-bg-1.png);
  }
  .top {
    margin: 0.27rem 0.26rem 0 0.26rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #ad9f66;
    display: flex;
    .img {
      width: 2.09rem;
      height: 1.24rem;
      background: #fff;
      position: relative;
      box-sizing: border-box;
      margin: 0.05rem 0 0 0.05rem;
      .border {
        width: 2.19rem;
        height: 1.34rem;
        margin: -0.05rem 0 0 -0.05rem;
      }
      .crown {
        width: 0.97rem;
        height: 0.51rem;
        position: absolute;
        top: -0.45rem;
        left: 0.63rem;
      }
      .vote-logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        height: auto;
      }
    }
    .name {
      width: 3.72rem;
      margin-left: 0.25rem;
      .short-name {
        font-size: 0.34rem;
        color: #444;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      span {
        display: inline-block;
        width: 0.44rem;
        height: 0.44rem;
        line-height: 0.44rem;
        font-size: 0.3rem;
        color: #7c501e;
        background: url(../../../assets/img/vote-ranking-bg.png) center
          no-repeat;
        background-size: cover;
        text-align: center;
        vertical-align: middle;
      }
      p {
        font-size: 0.26rem;
        line-height: 0.36rem;
        color: #666;
        margin-top: 0.2rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        /* autoprefixer: ignore next */
        -webkit-box-orient: vertical;
      }
    }
  }
  .bottom {
    width: 6.42rem;
    font-size: 0.26rem;
    font-weight: bold;
    color: rgba(153, 153, 153, 1);
    line-height: 0.36rem;
    margin: 0.3rem auto 0 auto;
    .info-item {
      margin-bottom: 0.19rem;
      .icon {
        float: left;
        width: 0.4rem;
        height: 0.3rem;
        margin-top: 0.05rem;
        background: center no-repeat;
        background-size: contain;
        &.address {
          background-image: url(../assets/address.png);
          margin-top: 0.06rem;
        }
        &.site {
          background-image: url(../assets/site.png);
        }
      }
      .content {
        display: block;
        margin-left: 0.5rem;
        &.site {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>
